import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../config/route/bt_app_router.gr.dart';
import '../../utils/bt_tool_utils.dart';
import 'models/bt_profile_model.dart';

@RoutePage(name: "profileRoute")
class BtProfilePage extends StatelessWidget {
  const BtProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BtProfileModel(),
      child: Consumer<BtProfileModel>(builder: (context, model, _) {
        return Stack(
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Image.asset(
                'assets/images/bt_profile_full_bg.png',
                fit: BoxFit.fitWidth,
              ),
            ),
            SingleChildScrollView(
              child: Container(
                height: MediaQuery.of(context).size.height - 177,
                margin: const EdgeInsets.only(top: 177),
                padding: const EdgeInsets.only(top: 71),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          model.nickname,
                          style: const TextStyle(
                            fontSize: 18,
                            color: Color(0xFF202020),
                          ),
                        ),
                        Padding(
                            padding: const EdgeInsets.only(left: 9),
                            child: InkWell(
                              child: Image.asset(
                                'assets/images/bt_icon_edit.png',
                                width: 18,
                                height: 18,
                              ),
                              onTap: () {
                                context.router.navigate(ModifyUserInfoRoute(userInfo: model.userInfo));
                              },
                            ))
                      ],
                    ),
                    const Divider(
                      height: 8,
                      thickness: 1,
                      color: Colors.transparent,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'ID：${model.userId}',
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            fontSize: 14,
                            color: Color(0x70000000),
                          ),
                        ),
                        InkWell(
                          child: Container(
                            width: 38,
                            height: 15,
                            margin: const EdgeInsets.only(left: 10),
                            padding: const EdgeInsets.only(bottom: 0),
                            decoration: BoxDecoration(
                              color: const Color(0xFF454545),
                              borderRadius: BorderRadius.circular(2),
                            ),
                            child: const Text(
                              'copy',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 10,
                                color: Color(0xFFFFFFFF),
                              ),
                            ),
                          ),
                          onTap: () async {
                            await copyTextToClipboard(model.userId);
                          },
                        )
                      ],
                    ),
                    const SizedBox(height: 20),
                    Container(
                      padding: const EdgeInsets.only(left: 20, right: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWell(
                            child: SizedBox(
                              width: (MediaQuery.of(context).size.width * 0.5) - 20,
                              child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
                                Stack(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.asset(
                                        'assets/images/bt_my_coins_bg.png',
                                        width: (MediaQuery.of(context).size.width * 0.5) - 25,
                                        height: 89,
                                        fit: BoxFit.fitWidth,
                                      ),
                                    ),
                                    const Padding(
                                      padding: EdgeInsets.only(left: 69, top: 32),
                                      child: Text(
                                        "My Coins",
                                        style: TextStyle(
                                          fontSize: 16,
                                          color: Color(0xFFEDA849),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ]),
                            ),
                            onTap: () {
                              context.router.navigate(const CoinShopRoute());
                            },
                          ),
                          InkWell(
                            child: SizedBox(
                              width: (MediaQuery.of(context).size.width * 0.5) - 20,
                              child: Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                                Stack(
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.asset(
                                        'assets/images/bt_my_ticket_bg.png',
                                        width: (MediaQuery.of(context).size.width * 0.5) - 25,
                                        height: 89,
                                        fit: BoxFit.fitWidth,
                                      ),
                                    ),
                                    const Padding(
                                      padding: EdgeInsets.only(left: 69, top: 32),
                                      child: Text(
                                        "My Ticket",
                                        style: TextStyle(
                                          fontSize: 16,
                                          color: Color(0xFF3F8ACF),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ]),
                            ),
                            onTap: () {
                              context.router.navigate(const MyTicketRoute());
                            },
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 20),
                    const Divider(
                      thickness: 8,
                      color: Color(0xFFF6F7F8),
                    ),
                    InkWell(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 35, right: 35),
                        child: Container(
                          height: 56,
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                color: Color(0xFFEEEEEE),
                              ),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Image.asset(
                                    'assets/images/bt_icon_block_list.png',
                                    width: 18,
                                    height: 16,
                                  ),
                                  const Padding(
                                    padding: EdgeInsets.only(
                                      left: 10,
                                    ),
                                    child: Text("Block List",
                                        style: TextStyle(fontSize: 14, color: Color(0xFF6D6D6D))),
                                  ),
                                ],
                              ),
                              Image.asset(
                                'assets/images/bt_icon_arrow_right.png',
                                width: 16,
                                height: 16,
                              ),
                            ],
                          ),
                        ),
                      ),
                      onTap: () {
                        context.router.navigate(const BlockListRoute());
                      },
                    ),
                    InkWell(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 35, right: 35),
                        child: Container(
                          height: 56,
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                color: Color(0xFFEEEEEE),
                              ),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Image.asset(
                                    'assets/images/bt_icon_about.png',
                                    width: 18,
                                    height: 16,
                                  ),
                                  const Padding(
                                    padding: EdgeInsets.only(
                                      left: 10,
                                    ),
                                    child: Text("About",
                                        style: TextStyle(fontSize: 14, color: Color(0xFF6D6D6D))),
                                  ),
                                ],
                              ),
                              Image.asset(
                                'assets/images/bt_icon_arrow_right.png',
                                width: 16,
                                height: 16,
                              ),
                            ],
                          ),
                        ),
                      ),
                      onTap: () {
                        context.router.navigate(const AboutRoute());
                      },
                    ),
                    InkWell(
                      child: Padding(
                        padding: const EdgeInsets.only(left: 35, right: 35),
                        child: SizedBox(
                          height: 56,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Image.asset(
                                    'assets/images/bt_icon_setting.png',
                                    width: 18,
                                    height: 18,
                                  ),
                                  const Padding(
                                    padding: EdgeInsets.only(
                                      left: 10,
                                    ),
                                    child: Text("Setting",
                                        style: TextStyle(fontSize: 14, color: Color(0xFF6D6D6D))),
                                  ),
                                ],
                              ),
                              Image.asset(
                                'assets/images/bt_icon_arrow_right.png',
                                width: 16,
                                height: 16,
                              ),
                            ],
                          ),
                        ),
                      ),
                      onTap: () {
                        context.router.navigate(const AccountSettingRoute());
                      },
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
                top: 50,
                right: 20,
                child: InkWell(
                  child: Image.asset(
                    'assets/images/bt_icon_cs.png',
                    width: 32,
                    height: 32,
                  ),
                  onTap: () {
                    context.router
                        .navigate(ChatRoute(targetId: model.userServiceId, targetName: '', targetAvatar: ''));
                  },
                )),
            Positioned(
              top: 130,
              left: 138,
              child: Center(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(49),
                  child: CachedNetworkImage(
                    height: 98,
                    width: 98,
                    fit: BoxFit.fill,
                    imageUrl: model.avatarUrl,
                    placeholder: (context, url) => Container(
                      height: 98,
                      width: 98,
                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(49)),
                    ),
                    errorWidget: (context, url, error) => Container(
                      height: 98,
                      width: 98,
                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(49)),
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }),
    );
  }
}
